<template>
  <v-app>
    <GoodsTopbar />
    <v-content>
      <v-tabs
        background-color="white"
        color="#2AB795"
        grow
        height="40"
        slider-size="3"
        show-arrows
        next-icon="mdi-chevron-right"
        prev-icon="mdi-chevron-left"
        v-model="model"
      >
        <v-tab v-for="(item, i) in items" :key="i" :href="`#tab-${i}`">
          {{ item.tab }}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="model">
        <v-tab-item :value="`tab-0`">
          <TabOne :goods="goodsData" :loading="dataLoading" ref="tabOne" />
        </v-tab-item>
        <v-tab-item :value="`tab-1`">
          <TabTwo :goods="goodsData" />
        </v-tab-item>
        <!-- <v-tab-item :value="`tab-2`">
          <TabThree />
        </v-tab-item> -->
        <!-- <v-tab-item :value="`tab-3`">
          <TabFour />
        </v-tab-item> -->
      </v-tabs-items>
      <GoodsButtombar />
    </v-content>
    <v-snackbar
      top
      color="success"
      :timeout="2000"
      v-model="cartItemAddSuccess"
    >
      已添加至购物车
    </v-snackbar>
  </v-app>
</template>

<script>
import GoodsButtombar from '@/components/GoodsButtombar.vue';
import GoodsTopbar from '@/components/GoodsTopbar.vue';
import TabOne from './components/tab1/index.vue';
import TabTwo from './components/tab2/index.vue';
import TabThree from './components/tab3/index.vue';
import TabFour from './components/tab4/index.vue';
import request from '@/request';

export default {
  name: 'Goods',
  data() {
    return {
      model: 'tab-0',
      cartItemAddSuccess: false,
      items: [
        { tab: '商品介绍' },
        { tab: '图文详情' }
        // { tab: '商品评价' }
        // { tab: '相关专题' }
      ],
      dataLoading: false,
      goodsData: {},
      baseReqData: {}
    };
  },
  components: {
    GoodsTopbar,
    GoodsButtombar,
    TabOne,
    TabTwo
    // TabThree,
    // TabFour
  },
  created() {
    const id = this.$route.query.id;
    this.dataLoading = true;
    request.post('/products/details', { id }).then(resp => {
      if (resp && resp.id) {
        this.goodsData = resp;
        this.baseReqData = {
          productId: this.goodsData.id,
          appUserId: this.$store.state.currentUser.id,
          price: this.goodsData.price,
          productPic: this.goodsData.albumPics.split(',')[0],
          productName: this.goodsData.name,
          productSubTitle: this.goodsData.subTitle,
          appUsername: this.$store.state.currentUser.username,
          productCategoryId: this.goodsData.productCategoryId
        };
        this.dataLoading = false;
      }
    });
  },
  methods: {
    addCartItem(reqData) {
      request
        .post('/cartItems/existsOne', { ...reqData, quantity: undefined })
        .then(resp => {
          if (resp && resp.id) {
            request
              .put(`/cartItems/${resp.id}`, {
                quantity: resp.quantity + reqData.quantity,
                price: resp.price + reqData.price
              })
              .then(() => {
                this.cartItemAddSuccess = true;
              });
          } else {
            request.post('/cartItems', reqData).then(() => {
              this.$store.dispatch('refreshShoppingCartItems');
              this.cartItemAddSuccess = true;
            });
          }
        });
    }
  },
  mounted: function() {
    this.$bus.on('onCartItemAdd', data => {
      const reqData = {
        ...this.baseReqData,
        price: this.baseReqData.price * data.quantity,
        ...data
      };
      this.addCartItem(reqData);
    });

    this.$bus.on('onBottombarCartItemAdd', () => {
      const reqData = {
        ...this.baseReqData,
        quantity: 1,
        productAttr: JSON.stringify(this.$refs.tabOne.getProductAttr())
      };
      this.addCartItem(reqData);
    });
  },
  destroyed: function() {
    this.$bus.off('onCartItemAdd');
    this.$bus.off('onBottombarCartItemAdd');
  }
};
</script>
